<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()

const orderList = JSON.parse(localStorage.getItem('OrdersArray'))
// console.log(orderList);

const goDetail = (pay: boolean) => {
    if (pay) {
        router.push('/completedorder')
    } else {
        router.push('/unpaidorders')
    }
}

</script>
<template>
    <div class="order">
        <header>
            <van-icon name="arrow-left" color="#000" size="24" @click="$router.back()" />
            <div class="title">
                我的订单
            </div>
        </header>
        <template v-for="order in orderList" :key="order.CinemaId">
            <div class="public" v-if="order.isPay" @click="goDetail(order.isPay)">
                <div class="vote">
                    <div>
                        <van-image width="70rem" height="100rem" fit="cover" radius="8rem" :src="order.img" />
                    </div>
                    <div class="vote-info">
                        <div class="nm">{{ order.name }}</div>
                        <div class="time">{{ order.dateinf }}</div>
                        <div class="cinema">{{ order.CMname }}</div>
                        <div class="sit">{{ order.lobbySeats }} <span v-for="item in order.Seat">{{ item }}</span></div>
                        <div class="count">{{ order.Seat.length }}张 原价￥{{ order.price }}</div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<style lang="less" scoped>
.order {
    background: linear-gradient(to bottom, #f8d9d6, #fff);
    height: 100vh;

    header {
        display: flex;
        align-items: center;
        padding: 12rem 6rem;

        .title {
            width: 90%;
            text-align: center;
            font-size: 14rem;
            font-weight: bold;
        }
    }

    .public {
        width: 94%;
        margin: auto;
        margin-top: 8rem;
        background: #fff;
        border-radius: 12rem;
    }

    .vote {
        padding: 12rem;
        display: flex;

        .vote-info {
            margin-left: 8rem;
            font-size: 12rem;
            color: #adadad;
            line-height: 24rem;

            .nm {
                font-size: 14rem;
                color: #000;
                font-weight: 600;
            }

            .time {
                color: #383838;
                font-weight: 600;
            }
        }

        .service {
            display: flex;
            font-size: 12rem;
            align-items: center;

            span {
                margin-left: 4rem;
                color: #bbbbbb;
            }
        }

        .detail {
            color: #8e8e8e;
            font-size: 12rem;
            margin-right: 12rem;
        }
    }

}
</style>